<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">

    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/project_detail.css">
</head>
<body>

    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button class="btn-footer btn-red" onclick="showDBottom();">我要捐赠</button>
            <button class="btn-footer btn-yellow">邀朋友一起捐</button>
        </div>
    </footer>
    
    <section class="ui-container">
        <div class="ui-placehold ui-placehold-img">
            <span style="background-image:url(../images/demo/demo-project-1.jpg)">
                <div class="h3-box"><h3>3万留守儿童的渴望</h3></div>
                <div class="status">募集中</div>
            </span>
        </div>

        <div class="u-module ui-border-tb">
            <p class="ui-txt-tips ui-border-b">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
            
            <ul class="ui-list">
                <li class="ui-border-t">
                    <div class="ui-avatar">
                        <span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">发起人：lisatong </h4>
                        <p class="ui-nowrap">小学数学老师</p>
                    </div>
                </li>
            </ul>

            <div class="ui-progress-box">
                <div class="ui-progress">
                    <span style="width:50%"></span>
                </div>
                <div class="ui-progress-val">20%</div>
            </div>

            <ul class="ui-row top-infos">
                <li class="ui-col ui-col-50"><p>目标 1000元</p></li>
                <li class="ui-col ui-col-50"><p>剩余天数 10天</p></li>
                <li class="ui-col ui-col-50"><p>还差 <i>2200元</i></p></li>
                <li class="ui-col ui-col-50"><p>捐助人数 <i>2049人</i></p></li>
            </ul>
        </div>

         <div class="u-module-title">捐助人爱心榜</div>
         <div class="u-module ui-border-tb">
            <div class="ui-justify avatar-list">
                <a href="##">
                    <ul class="">
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="ui-avatar-tiled"><span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span></div></li>
                        <li><div class="more"><img src="../images/icon-arrow-right.png" alt=""></div></li>
                    </ul>
                </a>
            </div>
        </div>

        <div class="u-module-title">筹款明细</div>
        <div class="u-module ui-border-tb">
            <ul class="ui-row momeny-list">
                <li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">品名</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">单价</p></li>
                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">数量</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">合计</p></li>

                <li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">篮球篮球篮球</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥50.00</p></li>
                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">x10</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥500.00</p></li>

                <li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">足球</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥50.00</p></li>
                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">x10</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥500.00</p></li>

                <li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">运费</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥12.00</p></li>
                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">x1</p></li>
                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥12.00</p></li>

                <li class="ui-col ui-col-40"><p class="ui-nowrap total-title">总价</p></li>
                <li class="ui-col ui-col-60"><p class="ui-nowrap total-price"><i>￥</i>1012.00</p></li>
            </ul>
        </div>

        <div class="u-module-title">项目详情</div>
        <div class="u-module ui-border-tb">
            <p class="ui-txt-tips">和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
            <img class="img-detail" src="../images/demo/demo-p-detail.jpg" alt="">
        </div>
    </section>

    <div class="d-bottom">
        <div class="b-info">
            <b class="btn-close"></b>
            <div class="title ui-border-b">请输入捐款金额</div>
            
            <div class="detail-box ui-whitespace">
                <div class="ui-justify">
                    <ul class="p-tag-list">
                        <li class="p-tag active">20<i>元</i></li>
                        <li class="p-tag">50<i>元</i></li>
                        <li class="p-tag">80<i>元</i></li>
                        <li class="p-tag">100<i>元</i></li>
                    </ul>
                </div>
                <div class="input-box"><input type="number" placeholder="自定义金额"></input><i>元</i></div>
                <button class="ui-btn-lg btn-red">立即捐款</button>

                <div class="detail-bottom">
                    <label class="ui-checkbox">
                        <input type="checkbox" checked="">
                    </label>
                    同意<a href="#" onclick="return showDeal();">《火堆用户协议》</a>
                </div>
            </div>
        </div>
    </div>

    <div class="dialog-step">
        <div class="dialog-box">
            <h4>《火堆用户协议》</h4>
            <div class="txt">
                1.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                2.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                3.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                4.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                5.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
            </div>
            <div class="btn-red btn-close">我知道了</div>
        </div>
    </div>

    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script src="../js/util_mobile.js"></script>

    <script>
        (function() {
            $('.d-bottom .b-info .p-tag-list .p-tag').click(function(){
                $(this).addClass('active').siblings('.p-tag').removeClass('active');
                $('.d-bottom .b-info .detail-box .input-box').removeClass('active');
            });

            $('.d-bottom .b-info .detail-box .input-box input').click(function(){
                $('.d-bottom .b-info .p-tag-list .p-tag').removeClass('active');
                $(this).parent().addClass('active');
            });

            $('.d-bottom .b-info .btn-close').click(function(){
                $(this).parents('.d-bottom').hide();
            });

            $('.dialog-step .dialog-box .btn-close').click(function(){
               $('.dialog-step').removeClass('show'); 
            });

            $('.d-bottom .b-info .detail-box button').tap(function(){
                myAlert('提示', 'hhhhhhhhhhhhh');
            })
        })();

        function showDBottom () {
            var d = $('.d-bottom');
            var b = d.find('.b-info');
            // b.css('bottom', b.height());
            // d.css('opacity', '0').show(); 

            d.show();
        }

        function showDeal () {
            $('.dialog-step').addClass('show');
            return false;
        }
    </script>
</body>
</html>